<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* .container {
      width: 200px;
      height: 20px;
      border: 1px solid red;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space:nowrap;
    } */
  </style>
</head>
<body>
  <!-- 
    span的宽度是不确定的，需要根据它外层的父元素决定；
    可拿到父元素div的宽度fatherWidth，通过拿到这个 span 元素的 offsetWidth ，
    就可以拿到文字的长度。通过判断文字的 offsetWidth 是否大于 fatherWidth；
    两个宽度相减，可以得出我们到底溢出的文字宽度为多少;

    假设溢出宽度为 200px。我们的文字大小为 20px，
    那么 200/20 就算出我们现在溢出了 10 个字。
    假如我们之前的文字总数为 30 个。
    那么在这个情况下我们屏幕上只展示了 20 个文字，
    因为有 10 个字溢出被我们忽略了
    要做的事情就非常简单了，我们只需要从原来 30 个字的中间开始做切割。
    一边去掉 5 个，那么此时容器恰好可以容下 20 个字。
    中间我们再手动加上 “...” 省略号
  -->
  <div id="container" class="container">
    <span id="text"></span>
  </div>

  <script>
    const text = '这是一个简单的测试，看看文字溢出的情况处理' // 拿到所有的文字信息
    

    const container = document.getElementById("container");
    /* 
      如果抽取组件，可以设置父盒子的样式
    */
    container.style.width = '200px';
    container.style.height = '20px';
    container.style.border = '1px solid red';
    container.style.overflow = 'hidden';
    container.style.textOverflow = 'ellipsis';
    container.style.whiteSpace = 'nowrap';

    const fatherWidth = container.offsetWidth;
    const elementText =  document.getElementById("text");
    const offsetWidth = elementText.offsetWidth;

    const textNumber = text.length; // 拿到文字的数量
    const avgStrWidth = 15 // 拿到平均每个文字多少宽度
    const canFitStrNumber = Math.floor(fatherWidth / avgStrWidth); // 根据父元素的宽度来计算出可以容纳多少文字
    const shouldDelNumber = textNumber - canFitStrNumber + 1.5; // 算出需要删除几个文字（1.5是为了省略号的宽度
    const delEachSide = shouldDelNumber / 2; // 因为要保留中间,所以我们不能只从开头删除，也需要从两头删除
    const endLeft = Math.floor(textNumber / 2 - delEachSide); // 因为下面要用到 slice 所以需要计算出 index
    const startRight = Math.ceil(textNumber / 2 + delEachSide); // 和上面同理
    elementText.textContent = text.slice(0, endLeft) + "..." + text.slice(startRight);
  </script>
</body>
</html>